<template>
  <div>
    <div class="search-container">
      <el-form ref="searchRef" :model="query" :inline="true">
        <el-form-item label="日文:">
          <!-- 文本框、下拉框、日期框 -->
          <el-input
            v-model="query.japanese"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="中文:">
          <el-input
            v-model="query.chinese"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="课程:">
          <el-input
            v-model="query.course"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetForm()">重置</el-button>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="japanese" label="日文" />
        <el-table-column prop="ruby" label="读音" />
        <el-table-column prop="chinese" label="中文" />
        <el-table-column prop="course" label="课程" width="120" />
        <el-table-column align="right" label="操作" width="180">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              icon="Edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              icon="Delete"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px; float: right"
        background
        layout="total, prev, pager, next"
        :total="pagination.total"
        :page-size="pagination.limit"
        :current-page="pagination.page"
        :page-sizes="[5, 10, 20, 30, 40, 50]"
        @current-change="currentchange"
      >
      </el-pagination>
    </div>
    <el-dialog :title="type === 0 ? '新增' : '编辑'" v-model="showEdit">
      <div class="ssml-box">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="180px"
          class="demo-ruleForm"
        >
          <el-form-item label="日文" prop="japanese" style="width: 80%">
            <el-input v-model="ruleForm.japanese"></el-input>
          </el-form-item>
          <el-form-item label="注音" prop="ruby" style="width: 80%">
            <el-input v-model="ruleForm.ruby"></el-input>
          </el-form-item>
          <el-form-item label="中文" prop="chinese" style="width: 80%">
            <el-input v-model="ruleForm.chinese"></el-input>
          </el-form-item>
          <el-form-item label="课程" prop="course" style="width: 80%">
            <el-input v-model="ruleForm.course"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >确定</el-button
            >
            <el-button @click="resetForm1('ruleFormRef')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="dashboard">
import { reactive, ref } from "vue";
import request from "@/utils/request";
import { FormInstance, FormRules, UploadProps } from "element-plus";
const ruleFormRef = ref<FormInstance>();
const type = ref(1);
const id = ref("");
const tableData = ref([]);
const pagination = reactive({
  page: 1,
  limit: 10,
  total: 0,
});
const query = reactive({
  japanese: "",
  chinese: "",
  course: "",
});
const showEdit = ref(false);
let ruleForm = reactive({
  japanese: "",
  ruby: "",
  chinese: "",
  course: "",
});
const rules = {
  japanese: [{ required: true, message: "请输入", trigger: "blur" }],
  ruby: [{ required: true, message: "请输入", trigger: "blur" }],
  chinese: [{ required: true, message: "请输入", trigger: "blur" }],
  course: [{ required: true, message: "请输入", trigger: "blur" }],
};

const submitForm = async (formEl: FormInstance) => {
  console.log("111");
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      if (type.value === 0) {
        let params = {
          ...ruleForm,
        };
        request({ url: "api/add", method: "post", data: params }).then(
          (res) => {
            showEdit.value = false;
            getData();
          }
        );
      } else {
        let params = {
          id: id.value,
          ...ruleForm,
        };
        console.log(params);
        request({ url: "api/update", method: "post", data: params }).then(
          (res) => {
            showEdit.value = false;
            getData();
          }
        );
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm1 = (formEl) => {
  ruleForm.japanese = "";
  ruleForm.chinese = "";
  ruleForm.ruby = "";
  ruleForm.course = "";
  showEdit.value = false;
  console.log("ruleForm---", ruleForm);
};
const handleSearch = () => {
  getData();
};
const resetForm = () => {
  query.japanese = "";
  query.chinese = "";
  query.course = "";
  pagination.page = 1;
  pagination.limit = 10;
  getData();
};
const add = () => {
  type.value = 0;
  showEdit.value = true;
  console.log("ruleForm---111", ruleForm);
};
const handleEdit = (index, row) => {
  console.log(index, row);
  id.value = row.id;
  type.value = 1;
  showEdit.value = true;
  ruleForm.japanese = row.japanese;
  ruleForm.ruby = row.ruby;
  ruleForm.chinese = row.chinese;
  ruleForm.course = row.course;
};
const handleDelete = (index, row) => {
  let params = {
    id: row.id,
  };
  console.log(params);
  request({ url: "api/delete", method: "post", data: params }).then((res) => {
    getData();
  });
};
const getData = () => {
  let params = {
    japanese: query.japanese,
    chinese: query.chinese,
    course: query.course,
    page: pagination.page,
    limit: pagination.limit,
  };
  request({ url: "api/class", method: "post", data: params }).then((res) => {
    let data = res.data;
    tableData.value = data.data;
    pagination.total = data.pagination.total;
  });
};
getData();
const currentchange = (value) => {
  pagination.page = value;
  getData();
};
</script>

<style scoped lang="less">
.search {
}
</style>
